<template>
  <v-container>
    <!-- 面包屑导航 -->
    <v-breadcrumbs :items="breadcrumbs" class="pa-0 mb-6"></v-breadcrumbs>
    
    <div v-if="product">
      <!-- 上部分：左图右文 -->
      <v-row class="mb-10">
        <!-- 左侧产品图片 -->
        <v-col cols="12" md="6" class="d-flex align-center">
          <v-img :src="product.image" height="400" cover class="rounded-lg product-image">
          </v-img>
          <!-- 小图预览 -->
          <!-- <v-row class="mt-4">
            <v-col v-for="n in 4" :key="n" cols="3">
              <v-img :src="product.image" height="80" cover class="rounded cursor-pointer thumbnail">
              </v-img>
            </v-col>
          </v-row> -->
        </v-col>
        
        <!-- 右侧产品信息 -->
        <v-col cols="12" md="6">
          <h1 class="text-h3 font-weight-bold mb-2">{{ product.name }}</h1>
          <v-divider class="mb-4"></v-divider>
          <p class="text-body-1 mb-6">{{ product.description }}</p>
        </v-col>
      </v-row>
      
      <!-- 下部分：详细内容介绍 -->
      <v-card class="mb-10">
 
        
   
      </v-card>
      
      <!-- 相关产品 -->
      <h2 class="text-h4 font-weight-bold mb-6">{{ $t('productDetail.relatedProducts') }}</h2>
      <v-row>
        <v-col
          v-for="relatedProduct in relatedProducts"
          :key="relatedProduct.id"
          cols="12"
          sm="6"
          md="3"
        >
          <v-card
            class="mx-auto"
            max-width="300"
            @click="goToProduct(relatedProduct.id)"
          >
            <v-img
              :src="relatedProduct.image"
              height="200px"
              cover
            ></v-img>
            <v-card-title>{{ relatedProduct.name }}</v-card-title>
            <v-card-text>
              <div class="mb-2 text-body-2">{{ relatedProduct.description.substring(0, 80) }}...</div>
            </v-card-text>
          </v-card>
        </v-col>
      </v-row>
      
      <!-- 如果没有相关产品时的提示 -->
      <div v-if="relatedProducts.length === 0" class="text-center py-8">
        <p class="text-body-1 text--secondary">
          {{ $i18n.locale === 'zh' ? '暂无相关产品' : 'No related products available' }}
        </p>
      </div>
    </div>
    
    <!-- 产品不存在时显示 -->
    <div v-else class="text-center py-10">
      <v-icon size="x-large" color="error" class="mb-4">mdi-alert-circle</v-icon>
      <h2 class="text-h4 mb-2">{{ $t('productDetail.notFound.title') }}</h2>
      <p class="text-body-1 mb-6">{{ $t('productDetail.notFound.message') }}</p>
      <v-btn color="primary" to="/products">
        {{ $t('productDetail.notFound.backToProducts') }}
      </v-btn>
    </div>
  </v-container>
</template>

<script>
import { getProductById, getProductsByCategory } from '@/config/products.js'

export default {
  name: 'ProductDetailPage',
  data() {
    return {
      productId: null,
      selectedImage: null,
      activeTab: 'description',
      breadcrumbs: [
        {
          title: this.$t('message.home'),
          disabled: false,
          to: '/'
        },
        {
          title: this.$t('message.products'),
          disabled: false,
          to: '/products'
        }
      ]
    }
  },
  computed: {
    product() {
      if (!this.productId) return null
      
      const baseProduct = getProductById(this.productId)
      if (!baseProduct) return null
      
      return {
        ...baseProduct,
        longDescription: baseProduct.description + (this.$i18n.locale === 'zh' 
          ? ' 该产品经过精心设计和严格测试，确保为用户提供最佳体验。'
          : ' This product has been carefully designed and rigorously tested to ensure the best user experience.'),
        features: this.$i18n.locale === 'zh'
          ? ['高品质材料', '精工制作', '用户友好设计', '持久耐用', '性价比高', '售后保障']
          : ['High-quality materials', 'Precision craftsmanship', 'User-friendly design', 'Long-lasting durability', 'Great value', 'After-sales support'],
        specifications: {
          [this.$i18n.locale === 'zh' ? '品牌' : 'Brand']: this.$i18n.locale === 'zh' ? '优质品牌' : 'Premium Brand',
          [this.$i18n.locale === 'zh' ? '型号' : 'Model']: `Model-${baseProduct.id}`,
          [this.$i18n.locale === 'zh' ? '颜色' : 'Color']: this.$i18n.locale === 'zh' ? '多色可选' : 'Multiple colors available',
          [this.$i18n.locale === 'zh' ? '保修' : 'Warranty']: this.$i18n.locale === 'zh' ? '1年保修' : '1 Year Warranty'
        }
      }
    },
    // 新增：获取同分类的其他产品
    relatedProducts() {
      if (!this.product) return []
      
      // 获取同分类的所有产品
      const categoryProducts = getProductsByCategory(this.product.categoryValue)
      
      // 排除当前产品
      const otherProducts = categoryProducts.filter(p => p.id !== this.product.id)
      
      // 随机打乱数组并取前4个
      const shuffled = otherProducts.sort(() => 0.5 - Math.random())
      return shuffled.slice(0, 4)
    }
  },
  created() {
    // 从URL获取产品ID
    this.productId = this.$route.query.id
  },
  methods: {
    selectImage(image) {
      this.selectedImage = image
    },
    goToProduct(id) {
      this.$router.push(`/product-detail?id=${id}`)
    }
  },
  watch: {
    // 监听语言变化，更新面包屑
    '$i18n.locale'() {
      this.breadcrumbs = [
        {
          title: this.$t('message.home'),
          disabled: false,
          to: '/',
        },
        {
          title: this.$t('message.products'),
          disabled: false,
          to: '/products',
        },
        {
          title: this.product ? this.product.name : this.$t('productDetail.productDetails'),
          disabled: true,
        },
      ]
    }
  }
}
</script>

<style scoped>
.product-image {
  transition: transform 0.3s ease;
}

.product-image:hover {
  transform: scale(1.02);
}

.thumbnail {
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.thumbnail:hover {
  border-color: var(--v-primary-base);
  transform: translateY(-2px);
}

.cursor-pointer {
  cursor: pointer;
}

.feature-list li {
  margin-bottom: 8px;
  position: relative;
  padding-left: 24px;
}

.feature-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--v-primary-base);
  font-weight: bold;
}
</style>